<template>
<div>
    <button @click="goback">返回</button>
    <div class="blue">
</div>
    <div class="white">
        <div class="touxiang">
            <img src="../../assets/touxiang.jpg" alt="">
        </div>
        <div class="use">
            <div class="useName">晔兮若影</div>
            <div class="use_brand">☺☀☝✿❤</div>
            <div class="id_phone">ID:1069143013</div>
        </div>
          <div class="line">
        <div class="line-one">
            <div>红包</div>
            <div>优惠券</div>
            <div>仙豆</div>
            <div>白条</div>
        </div>
        </div>
        <div class="line-two">
            <div>218</div>
            <div>12张</div>
            <div>88</div>
            <div>1000</div>
        </div>
    </div>
  <div class="bottom_my">
<div class="one">

      <div class="one_img">￥</div>
    <div class="one_content">我的钱包</div>

    <div class="one_symbol">＞</div>
</div>
<router-link to="/manageaddress">
    <div class="two">
    <div class="two_img">☺</div>
    <div class="two_content">我的地址</div>
    <div class="two_symbol">＞</div>
</div>
</router-link>
<div class="three">

      <div class="three_img">✉</div>
    <div class="three_content">客服与帮助</div>

    <div class="three_symbol">＞</div>
</div>
  </div>
  <Docker :index="4"/>
    </div>

    
</template>

<script setup>
// console.log('my组件渲染');
import Docker from '@/components/Docker.vue';
// import store from '@/store';
import {useRouter}from 'vue-router'
import { useStore } from 'vuex';
let store=useStore()
let router=useRouter()
const goback=()=>{
    store.commit("changeRouterType","back")
    console.log(store.getters.routerType)
    router.back()
}




</script>

<style lang="scss" scoped>
.blue{
    margin:0 auto;
    margin-top:-2.5rem;
    margin-left:-0.6rem;
    width: 5rem;
    height: 5rem;
    background-color: #50C7FB;
    border-radius: 2.5rem;
    
}
.white{
    position:absolute;
    margin:0 auto;
    top:1.08rem;
    left:0.18rem;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);
    width: 3.39rem;
    height: 2.03rem;
    border-radius:0.05rem;
    background-color:#fff;
}
.touxiang{
     position:absolute;
        top:-0.47rem;
        left:1.23rem;
    width: 0.94rem;
    height: 0.94rem;
    border-radius: 0.47rem;
   
    img{
        display: block;
        width: 0.94rem;
        height: 0.94rem;
        border-radius: 0.47rem;
    }

}
.useName{
    margin-left:1.2rem;
    width: 1.7rem;
    height: 0.36rem;
    font-size:0.24rem;
    margin-top:0.59rem;

}
.use_brand{
    width: 0.6rem;
    height: 0.15rem;
    background-color: #8ACA00;
    border-radius: 0.07rem;
    margin-top:-0.28rem;
    margin-left:2.4rem;
}
.id_phone{
    width: 1.62rem;
    height: 0.17rem;
    text-align: center;
    font-size:0.14rem;
    color:#C1C0C9;
    margin-left:0.89rem;
    margin-top:0.14rem;
}
.line{
   
        width: 3.39rem;
      height: 0.76rem;
      border-top:solid 0.01rem #C1C0C9;
       margin-top:0.16rem;

}
.line-one{
     display: flex;
    justify-content: space-around;
    align-items: center;
     width: 3.39rem;
    font-size:0.12rem;
    color:#C1C0C9;
    margin-top:0.12rem;
}
.line-two{
    margin-top:-0.42rem;
     display: flex;
    justify-content: space-around;
    align-items: center;
     width: 3.39rem;
    font-size:0.2rem;
    color:#262628;
}
.bottom_my{
     position:absolute;
    margin:0 auto;
    top:3.27rem;
    left:0.18rem;
    width: 3.39rem;
    height: 1.46rem;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);
    border-radius:0.05rem;
    background-color:#fff;
}
.one{
    margin-top:0.17rem;
    width: 3.39rem;
    height: 0.22rem;

}

.one_img{
    float:left;
    margin-left:0.21rem;
   
    width: 0.22rem;
    height: 0.22rem;
    background-color: #ED4A47;
    color:#fff;
    font-size:0.22rem;
    border-radius: 0.05rem;
}
.one_content{
    float:left;
    margin-left:0.12rem;
    width: 0.56rem;
    line-height: 0.22rem;
    height: 0.22rem;
    font-size:0.14rem;
}
.one_symbol{
    float:right;
    margin-right:0.26rem;
    width: 0.05rem;
    font-size:0.24rem;
    color:#C2C4CA;
    line-height: 0.22rem;
    height: 0.22rem;
}



.two{
    margin-top:0.17rem;
    width: 3.39rem;
    height: 0.22rem;


}

.two_img{
    float:left;
    margin-left:0.21rem;
   
    width: 0.22rem;
    height: 0.22rem;
    background-color: #32C5FF ;
    color:#fff;
    font-size:0.22rem;
    border-radius: 0.05rem;
}
.two_content{
    float:left;
    margin-left:0.12rem;
    width: 0.56rem;
    line-height: 0.22rem;
    height: 0.22rem;
    font-size:0.14rem;
    color:#262628;
}
.two_symbol{
    float:right;
    margin-right:0.26rem;
    width: 0.05rem;
    font-size:0.24rem;
    color:#C2C4CA;
    line-height: 0.22rem;
    height: 0.22rem;
}

.three{
    margin-top:0.17rem;
    width: 3.39rem;
    height: 0.22rem;

}

.three_img{
    float:left;
    margin-left:0.21rem;
   
    width: 0.22rem;
    height: 0.22rem;
    background-color: #9013FE;
    color:#fff;
    font-size:0.22rem;
    border-radius: 0.05rem;
}
.three_content{
    float:left;
    margin-left:0.12rem;
    width: 0.76rem;
    line-height: 0.22rem;
    height: 0.22rem;
    font-size:0.14rem;
}
.three_symbol{
    float:right;
    margin-right:0.26rem;
    width: 0.05rem;
    font-size:0.24rem;
    color:#C2C4CA;
    line-height: 0.22rem;
    height: 0.22rem;
}
</style>